<template>
  <div class="flex space-x-3 items-stretch">
    <a :href="`https://twitter.com/intent/tweet?url=${ uri }`"
      rel="nofollow"
      class="flex items-center py-2 px-2 bg-white border border-gray-2000 rounded share-item group to-share hover:border-purple-1300 w-38 h-38"
      target="_blank">
      <svg-icon className="w-5 h-5"
        iconName='twitter_logo'></svg-icon>
      <!-- <span class="text-gray-1000 group-hover:text-purple-1300 whitespace-nowrap">{{$t('tag_share')}}</span> -->
    </a>
    <a :href="`https://www.facebook.com/sharer.php?u=${ uri }`"
      rel="nofollow"
      class="flex items-center py-2 px-2 bg-white border border-gray-2000 rounded share-item group to-share hover:border-purple-1300 w-38 h-38"
      target="_blank">
      <svg-icon className="w-5 h-5"
        iconName='facebook_logo'></svg-icon>
      <!-- <span class="text-gray-1000 group-hover:text-purple-1300 whitespace-nowrap">{{$t('tag_share')}}</span> -->
    </a>
  </div>
</template>

<script>
export default {
  name: 'MinShare',
  data() {
    return {
      uri: `https://www.toolify.ai${this.$route.fullPath}`,
    }
  },
}
</script>
<style lang='scss' scoped>
.w-38 {
  width: 38px;
}

.h-38 {
  height: 38px;
}
</style>